<!-- 日志删除策略设置 弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月12日 23:36:17 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="日志删除策略设置" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="日志删除策略" v-bind="validateInfos.riZhiShanChuCeLue">
        <a-select v-model:value="modelRef.riZhiShanChuCeLue" placeholder="请选择日志删除策略">
          <a-select-option value="rongLiang">基于容量的删除策略配置</a-select-option>
          <a-select-option value="tianShu">基于天数的删除策略配置</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="日志容量上限" v-bind="validateInfos.riZhiRongLiangShangXian" v-if="modelRef.riZhiShanChuCeLue=='rongLiang'">
        <a-row :gutter="12">
          <a-col flex="auto">
            <a-input v-model:value="modelRef.riZhiRongLiangShangXian" placeholder="请输入日志容量上限" />
          </a-col>
          <a-col>
            %
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="日志保留天数" v-bind="validateInfos.riZhiBaoLiuTianShu" v-if="modelRef.riZhiShanChuCeLue=='tianShu'">
        <a-row :gutter="12">
          <a-col flex="auto">
            <a-input v-model:value="modelRef.riZhiBaoLiuTianShu" placeholder="请输入日志保留天数" />
          </a-col>
          <a-col>
            天
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="执行时间" v-bind="validateInfos.zhiXingShiJian">
        <a-time-picker v-model:value="modelRef.zhiXingShiJian" value-format="HH:mm:ss" placeholder="请选择执行时间" style="width: 100%"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  riZhiShanChuCeLue: 'rongLiang',
  riZhiRongLiangShangXian: '',
  riZhiBaoLiuTianShu: '',
  zhiXingShiJian: ''
})

const rulesRef = reactive({
  riZhiShanChuCeLue: [
    {
      required: true,
      message: '请选择日志删除策略'
    }
  ],
  riZhiRongLiangShangXian: [
    {
      required: true,
      message: '请输入日志容量上限'
    }
  ],
  riZhiBaoLiuTianShu: [
    {
      required: true,
      message: '请输入日志保留天数'
    }
  ],
  zhiXingShiJian: [
    {
      required: true,
      message: '请选择执行时间'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('日志删除策略设置 >>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
</style>